<template>
	<view>
		<u-code ref="uCode" @change="codeChange" keep-running start-text="发送验证码"></u-code>
		<text @tap="getCodeInfo" :text="tips" class="u-page__code-text">{{tips}}</text>
	</view>
</template>

<script>
	import { getCode } from '@/common/api/userApi.js';
	import { isvalidPhone } from '@/common/utils/validate'
	export default {
		name: "getCode",
		props:{
			codePhone:String
		},
		data() {
			return {
				tips: '',
			};
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCodeInfo() {
				if(isvalidPhone(this.codePhone)){
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						getCode({phone: this.codePhone}).then(res=>{
							console.log("短信验证码",res)
							uni.hideLoading();
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}else{
					uni.$u.toast('请填写正确手机号');
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-page__code-text {
		color: $u-primary;
		border-left: 1px solid #DADBDE;
		padding-left: 20rpx;
	}
</style>
